<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>查在建项目</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">
              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="工程名称">
                    <Input v-model:value="queryParam.activityName" placeholder="请输入工程名称" />
                  </FormItem>
                </Col>

<!--             <Col :span="8">
                  <FormItem label="业务类别" class="my">
                    <Select v-model:value="queryParam.type">
                      <Option value="">全部工程类别</Option>
                      <Option :value="item.id" v-for="item in dictionary.type">{{ item.dataValue }}</Option>
                    </Select>

                  </FormItem>
                </Col>-->
                <Col :span="8">
                  <FormItem label="项目区划">
                    <Cascader  v-model:value="value" change-on-select expandTrigger="hover"
                               :field-names="{ label: 'regionName', value: 'regionCode', children: 'children' }"
                               :options="options" @change="regionChange"
                               placeholder="请选择项目区划">
                    </Cascader>
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="企业名称">
                    <Input v-model:value="queryParam.unitName" placeholder="请输入企业名称" />
                  </FormItem>
                </Col>

              </Row>
              <Row :gutter="[24, 24]">
                <Col :span="8">

                  <p class="mb0">查询结果：共<span class="red">{{pagination.total}}</span>条数据</p>
                </Col>


                <Col :span="16" class="text-right">
                  <Button type="primary" ghost @click="handleReset">重置</Button>
                  <Button type="primary" @click="handleSearch">立即查询</Button>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>
    <p class="pt10 mb0 orange">此数据不作为是否在建的查询依据，请以项目实际情况为准</p>
    <div class="comp-table">

      <List
          item-layout="horizontal"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"

      >
        <template #renderItem="{ item , index}">
          <ListItem>
            <div class="initWrap flex-s">
              <div class="init-sx">在建项目</div>
              <div class="init-sr">
                <h4 class="flex-s">
                  <a target="_blank" :href="`/activity/${item.activityId}`">{{ item.actiName }}   </a>
<!--                  <span class="address"><i></i> {{ item.actiBusiName }}</span>-->
                </h4>
                <p class="init-des">
                  <span class="mr20"> 工程编号：{{ item.activityNo }}</span>
                  <span>工程类别：{{ item.actiBusiName }}</span>
                </p>
                <p class="init-des">
                  <span class="mr20"> 发包单位：{{ item.contUnitName }}</span>
                  <span>承接单位：{{ item.projUtakeUnitName }}</span>
                </p>
              </div>
            </div>

          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" >
import {defineComponent, ref,  onMounted, reactive} from "vue";
import {Row, Col, Form, Input, Button, Cascader, Collapse, Breadcrumb, List , Select} from "ant-design-vue";
import { getQueryBuildingListApi } from '/@/api/servicemore';
import { getRegionProv } from '/@/api/pro';
import {getIndexCodeApi} from "/@/api/company";

// type
interface queryConfig {
  activityName: string;
  unitName:string;
  type: string;
  regionCode: string;
  current: number;
  size: number;
}


interface Option {
  regionCode: string;
  regionName: string;
  disabled?: boolean;
  children?: Option[];
  [key: string]: any;
}

export default defineComponent({
  components: {
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Cascader,
    Collapse,
    CollapsePanel:Collapse.Panel,
    Breadcrumb,
    BreadcrumbItem:Breadcrumb.Item,
    BreadSeparator:Breadcrumb.Separator,
    List,
    ListItem: List.Item,
    Select,Option: Select.Option
  },
  setup() {
    const activeKey = ref(['1']);
    const loading = ref<boolean>(true);
    const value = ref<string[]>([]);
    const options=ref<Option[]>([]);
    const dataSource = ref<unknown[]>([]);
    const dictionary = reactive({
      type:[]
    })
    const pagination = ref({
      current: 1,
      total: 0,
      onChange: (page: number) => {
        pagination.value.current = page;
        queryParam.current = page;
        getTableList();
      },
      pageSize: 10
    })


    let queryParam = reactive<queryConfig>({
      unitName: '',
      activityName:'',
      type: "",
      regionCode:'',
      current: 1,
      size: 10
    })

    const getTableList = async () => {
      loading.value = true;
      let data = await getQueryBuildingListApi(queryParam);
      pagination.value.total = data.total;
      dataSource.value = data.records;
      loading.value = false;
    }

    const handleSearch = () => {
      queryParam.current = 1;
      pagination.value.current = 1;
      getTableList();
    }

    const handleReset = () => {

      value.value = [];
      pagination.value.current = 1;
      Object.assign(queryParam,{
        unitName: '',
        activityName:'',
        regionCode:'',
        type: "",
        current: 1
      })
      getTableList();
    }

    const regionChange = (value)=>{
      if(value){
        queryParam.regionCode = value[value.length-1]
      }
    }

    const methodRegion = async () => {
      options.value = await getRegionProv({code:65});
    }

    const getIndexCode = (data,back) =>{
      getIndexCodeApi(data).then(res=>{
        if(back)back(res)
      })
    }

    onMounted(() => {
      methodRegion()
      getTableList();
      getIndexCode('JSHD_FBLB',function (res){   //初始化 字典表  业务类别
        console.log(res);
        dictionary.type = res;
      })
    });


    return {
      activeKey,queryParam, dataSource, options ,loading,
      pagination , getTableList, handleSearch,
      handleReset , value , regionChange , dictionary
    };
  },
});
</script>

<style lang="less" scoped>

.init-sx{
  background: #7C72DC;
}

::v-deep(.ant-col) {
  .ant-form-item.my {
    .ant-form-item-control-wrapper {
      flex: 0 0 80%;
    }
  }
}

.comp-query {
  padding: 2px 5px;
  background: @white;

  ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }
  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 22px;
    }
  }
}

::v-deep(.ant-list-item){
  padding: 25px 0;
  margin-bottom: 0;
}

.comp-table {
  padding: 0 30px;
  margin-top: 15px;
  background: @white;
}

.init-des {
  span{
    display: inline-block;

    &:first-child{
      min-width: 300px;
    }
  }
}

.com{
  padding-right: 20px;
  margin-right: 20px !important;
  color: @blue;
  border-right: 1px solid #E8EAEE;

  i{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: text-bottom;
    background: url("/src/assets/img/qi.png") no-repeat;
  }
}

.pt10.mb0.orange{
  font-size: 16px;
}
</style>
